<template>
  <div class="role_admin_box">
    <div class="add_btn_top">
      <div class="sw_btn_box">
        <div
          :style="{
            color: switchText == '显示筛选' ? '#666666' : '#409EFF',
            fontSize: '14px',
          }"
        >
          {{ switchText }}
        </div>
        <el-switch
          v-permission="[4, 'switch']"
          style="margin-left: 10px"
          active-color="#2680D2"
          v-model="isShowScreen"
        >
        </el-switch>
        <div class="line"></div>
        <el-button
          v-permission="[1, 'button']"
          @click="handAdd"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          >添加</el-button
        >
        <el-button
          style="margin-left: 10px"
          v-if="isDelbtn"
          @click="handDel(ids)"
          icon="el-icon-delete"
          size="mini"
          v-permission="[2, 'button']"
          >删除</el-button
        >
      </div>
    </div>
    <div class="role_admin" v-permission="[4, 'list']">
      <el-row
        :gutter="20"
        v-if="tableData && tableData.length !== 0"
        v-init-screen-h
        :style="{
          width: isShowScreen ? '79%' : '100%',
          background: '#fff',
        }"
      >
        <el-checkbox-group v-model="checkList" @change="handleCheck">
          <el-col
            style="margin-bottom: 20px"
            :lg="{ span: '4-8' }"
            :md="8"
            :sm="12"
            :xs="24"
            v-for="item in tableData"
            :key="item.id"
          >
            <div class="item">
              <div class="content">
                <div class="title">
                  <div>
                    {{ item.name }}
                  </div>

                  <el-checkbox
                    :disabled="item.name == 'super_admin'"
                    :label="item.id"
                  ></el-checkbox>
                </div>
                <div class="summary">备注: {{ item.remark }}</div>
                <div class="icons">
                  <el-tooltip
                    effect="light"
                    content="分配菜单"
                    placement="top-start"
                  >
                    <img
                      v-permission="[7, 'img']"
                      @click.stop="handMenu(item)"
                      style="width: 14px; height: 14px"
                      src="@/assets/images/fenpei_caidan.png"
                      class="icon"
                      alt=""
                    />
                  </el-tooltip>

                  <div class="line"></div>
                  <el-tooltip
                    effect="light"
                    content="分配资源"
                    placement="top-start"
                  >
                    <img
                      v-permission="[8, 'img']"
                      @click.stop="handDis(item)"
                      src="@/assets/images/ziyuan_fenpei.png"
                      style="width: 14px; height: 14px"
                      class="icon"
                      alt=""
                    />
                  </el-tooltip>

                  <div class="line"></div>
                  <span
                    class="el-icon-edit-outline"
                    style="color: #2680d2; font-size: large"
                    @click.stop="handEdit(item)"
                  ></span>
                  <div class="line"></div>
                  <span
                    :style="{
                      pointerEvents: item.name == 'super_admin' ? 'none' : '',
                      color: item.name == 'super_admin' ? '#edf2fc' : '#2680d2',
                    }"
                    v-permission="[2, 'icon']"
                    @click.stop="handDel(item.id)"
                    class="el-icon-delete"
                    style="font-size: large"
                  ></span>
                </div>
              </div>
            </div>
          </el-col>
        </el-checkbox-group>
      </el-row>
      <empty-data
        v-if="tableData && tableData.length == 0"
        v-init-screen-h
      ></empty-data>
      <Pagination
        @pagination="pagination"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :pageSizes.sync="pageSizes"
      />
    </div>
    <div v-if="isShowScreen" class="searchForm">
      <div style="width: 100%" v-init-screen-h>
        <div class="select">筛选</div>
        <div class="">
          <div class="searchText">角色名</div>
          <el-input
            class="inputStyle"
            v-model="form.name"
            clearable
            size="mini"
            placeholder="请输入角色名"
          >
          </el-input>
        </div>
      </div>
      <div class="bottomBtn">
        <el-button class="reset" size="mini" style="width: 50%" @click="reSet"
          >重置</el-button
        >
        <el-button
          @click="init"
          class="submit"
          size="mini"
          style="width: 50%"
          type="primary"
          >提交</el-button
        >
      </div>
    </div>
    <AddDialog
      ref="addDialgRef"
      @closeDialog="closeDialog"
      :isedit="isedit"
      :showDialog.sync="showDialog"
    ></AddDialog>
    <RoleFransfer
      :roleId="roleId"
      :showDialog.sync="showDisDialog"
      :dialogTitle="dialogTitle"
    ></RoleFransfer>
    <MenuFransfer
      :roleId="roleId"
      :showDialog.sync="showMenuDialog"
      :dialogTitle="dialogTitle"
    ></MenuFransfer>
  </div>
</template>

<script>
import "@/assets/style/deviceCss/filterWindow.css";
import Pagination from "@/views/common/page";
import { getRoleList, getRole, delRole } from "@/api/userAuth";
import emptyData from "@/views/common/emptyData";
import { paginationMixins } from "@/mixin/pagination";
import _ from "lodash";
import AddDialog from "./roleComponents/AddDialog.vue";
import RoleFransfer from "./roleComponents/PermissionsFransfer.vue";
import MenuFransfer from "./roleComponents/MenuFransfer.vue";
import { paramsValidate } from "@/utils/utils";

export default {
  components: {
    Pagination,
    emptyData,
    AddDialog,
    RoleFransfer,
    MenuFransfer,
  },
  computed: {
    isDelbtn() {
      return this.ids;
    },
  },
  mixins: [paginationMixins],
  data() {
    return {
      ids: "",
      checkList: [],
      dialogTitle: "",
      roleId: "",
      addFlag: false,
      tableData: [],
      isedit: false,
      switchText: "显示筛选",
      isShowScreen: false,
      form: {
        name: "",
      },
      showDialog: false,
      showDisDialog: false,
      showMenuDialog: false,
    };
  },
  mounted() {
    this.init();
    // this.getAssettypes();
  },
  methods: {
    handleCheck(val) {
      console.log("val :>> ", val);
      this.ids = val.join(",");
    },
    // 分配菜单
    handMenu({ id, name }) {
      this.dialogTitle = name;
      this.roleId = id;
      // this.showDisDialog = true;
      this.showMenuDialog = true;
    },
    // 分配资源
    handDis({ id, name }) {
      this.dialogTitle = name;
      this.roleId = id;
      this.showDisDialog = true;
    },
    // 重置
    reSet() {
      this.form.name = "";
      this.init();
    },
    closeDialog(isRefresh) {
      // isRefresh是否刷新
      if (isRefresh) {
        this.init();
      }
    },
    handEdit({ id }) {
      getRole(id).then((res) => {
        const { data } = res.data;
        this.showDialog = true;
        this.$nextTick(() => {
          this.isedit = true;
          this.$refs.addDialgRef.form = data;
        });
      });
      this.addFlag = true;
    },
    async handDel(id) {
      const isRole = this.$store.state.user.user.roleList.includes(id);
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await delRole(id);
        this.$msg({
          type: "success",
          message: "删除成功!",
        });
        this.init();
        // that.getStatusToken();
      });
      if (isRole) {
        // location.reload();
        await this.$store.dispatch("user/refreshToken");
        location.reload();
      }
      // if (isRole) {
      //   this.$confirm("当前用户属于此角色,删除将重新登陆,是否删除?", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }).then(async () => {
      //     await delRole(id);
      //     this.$msg({
      //       type: "success",
      //       message: "删除成功!",
      //     });
      //     await this.$store.dispatch("user/logout");
      //     // this.$router.replace("/");
      //     this.$router.push("/login");
      //     // that.getStatusToken();
      //   });
      // } else {
      //   this.$confirm("是否确认删除?", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }).then(async () => {
      //     await delRole(id);
      //     this.$msg({
      //       type: "success",
      //       message: "删除成功!",
      //     });
      //     this.init();
      //     // that.getStatusToken();
      //   });
      // }
    },
    handAdd() {
      this.isedit = false;
      this.showDialog = true;
    },
    async init() {
      getRoleList({
        pageSize: this.pageSize,
        page: this.pageNum,
        ...this.form,
      }).then((res) => {
        const { data } = res.data;
        // this.isShowScreen = false;
        if (paramsValidate(this.form)) {
          this.switchText = "显示筛选";
        } else {
          this.switchText = "显示筛选(已筛选)";
        }
        this.total = data.total;
        this.tableData = data.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.role_admin_box {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .sw_btn_box {
    display: flex;
    align-items: center;
  }
}
.role_admin {
  position: relative;
  padding: 20px;
  padding-bottom: 0;
  background-color: #fff;
  width: 100%;
  .item {
    /* display: flex; */
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    /* padding: 0 10px; */
    &:hover {
      /* 列表选中样式 */
      cursor: pointer;
      background-color: #f3f9ff;
      border: 1px solid rgba(38, 128, 210, 1);
    }
    .content {
      /* display: flex; */
      /* flex-direction: column; */
      /* justify-content: space-between; */
      .icons {
        display: flex;
        align-items: center;
        padding: 10px;
        justify-content: space-between;
        .line {
          height: 14px;
          width: 1px;
          background-color: #e4e4e4;
          margin: 0;
        }
        .icon {
        }
      }
      .title {
        color: #333;
        font-size: 16px;
        line-height: 44px;
        font-weight: 600;
        height: 44px;
        background-color: #f5f5f5;
        padding: 0 10px;
        @include textoverflow(1);
        display: flex;
        width: 100%;
        justify-content: space-between;
        /deep/ .el-checkbox__label {
          display: none;
        }
      }
      .summary {
        color: #333333;
        font-size: 14px;
        padding: 0 10px;
        margin: 20px 0;
        @include textoverflow(1);
      }
    }
  }
}
</style>
